<template>
  <basic-dialop :title="雾升设备" :visible.sync="visible" width="30%" @close="close">
    <el-form label-position="left" label-width="80px" :model="formData" v-loading="loading">
      <el-form-item label="名称" prop="name">
        <basic-input v-model="formData.name"></basic-input>
      </el-form-item>
       <el-form-item :label="$t('project.photo')" prop="photo">
        <el-upload
          class="image-uploader"
          action=""
          :http-request="uploadImage"
          :show-file-list="false"
          v-loading="uploadLoading"
        >
          <img v-if="formData.photo" :src="formData.photo" class="image-uploader-image" />
          <i v-else class="el-icon-plus image-uploader-icon"></i>
        </el-upload>
      </el-form-item>
       <el-form-item label="地区" prop="area">
        <basic-input v-model="formData.area"></basic-input>
         </el-form-item>
      <el-form-item label="资产类型" prop="assetType">
        <basic-input v-model.number="formData.assetType"></basic-input>
      </el-form-item>
       <el-form-item label="资产编号" prop="assetNumber">
        <basic-input v-model="formData.assetNumber"></basic-input>
      </el-form-item>
        <el-form-item label="品牌" prop="brandId">
        <basic-input v-model="formData.brandId"></basic-input>
         </el-form-item>
          <el-form-item label="横坐标" prop="fogRiseX">
        <basic-input v-model="formData.fogRiseX"></basic-input>
         </el-form-item>
          <el-form-item label="纵坐标" prop="fogRiseY">
        <basic-input v-model="formData.fogRiseY"></basic-input>
         </el-form-item>
      <el-form-item label="状态" prop="status">
        <basic-input v-model="formData.status"></basic-input>
      </el-form-item>
       </el-form> 
    <span slot="footer">
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
    </span>
 </basic-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicDialop from "@/components/Basic/Dialop/BasicDialop.vue";
import BasicInput from "@/components/Basic/Form/BasicInput.vue";
export default Vue.extend({
   components: { BasicDialop, BasicInput },
  data() {
    return {
      loading: false,
      uploadLoading: false,
      visible: false,
      formId: NaN,
      formData: {
        name: "",
        photo: "",
        area:"",
        assetType: "",
        assetNumber: "",
        fogRiseY:  "",
        fogRiseX:  "",
        status: "",
        brand: "",
      },
    };
  },
  methods: {
    init(id: number, data: any) {
      this.formId = id;
      this.formData = {
        name: data.name,
        photo: data.photo,
        area:data.area,
        assetType: data.assetType,
        assetNumber: data.assetNumber,
        fogRiseY: data.fogRiseY,
        fogRiseX: data.fogRiseX,
        status: data.status,
        brand: data.brandId,
      };
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    uploadImage(file: any) {
      this.uploadLoading = true;
      const form = new FormData();
      form.append("file1", file.file);
      form.append("type", "img");
      this.$mainApi.toolsApi.upload(form).then((res) => {
        this.formData.photo = process.env.VUE_APP_BACKEND_SERVER_ADDR + "/" + res.data[0];
      }).finally(() => {
        this.uploadLoading = false;
      });
    },
    submit() {
      this.loading = true;
      if (this.formId) {
        this.$mainApi.fogriseDevicesApi.putFogriseDevicesById(this.formId.toString(), this.formData as any).then((res) => {
          this.$message.success("提交成功");
          this.$emit('success');
          this.visible = false;
        }).finally(() => { this.loading = false; });
      } else {
        this.$mainApi.fogriseDevicesApi.postFogriseDevices(this.formData as any).then((res) => {
          this.$message.success("提交成功");
          this.$emit('success');
          this.visible = false;
        }).finally(() => { this.loading = false; });
      }
    },
  },
})
</script>

<style>
.image-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.image-uploader .el-upload:hover {
  border-color: #409eff;
}
.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.image-uploader-image {
  width: 178px;
  height: 178px;
  display: block;
}
</style>